<template>
  <s-layout title="支付密码" :bgStyle="template.style?.background">
    <view class="wrapepr">
      <uni-forms
        ref="form"
        :model="state.model"
        :rules="state.rules"
        class="form-box"
      >
        <my-form-item required name="pay_password">
          <my-input
            placeholder="请设置6位支付密码"
            type="password"
            v-model="state.model.pay_password"></my-input>
        </my-form-item>
        <my-form-item required name="captcha">
          <my-input
            placeholder="请输入图片验证码"
            v-model="state.model.captcha">
            <template v-slot:right>
              <button @tap="updateImageCode" class="ss-reset-button img-btn">
                <image :src="imgUrl"></image>
              </button>
            </template>
          </my-input>
        </my-form-item>
        <my-form-item required name="code">
          <my-input
            placeholder="请输入短信验证码"
            v-model="state.model.code">
            <template v-slot:right>
              <button
                class="ss-reset-button code-btn code-btn-start"
                :disabled="state.isMobileEnd"
                :class="{ 'code-btn-end': state.isMobileEnd }"
                @tap="getSmsCode('notice', userInfo.mobile,state.model.captcha)"
              >
                {{ getSmsTimer('notice') }}
              </button>
            </template>
          </my-input>
        </my-form-item>
      </uni-forms>
      <my-btn block @tap="handleSubmit">确认修改</my-btn>
    </view>
  </s-layout>
</template>
<script setup>
  import { computed, reactive, ref } from 'vue';
  import sheep from '@/sheep';
  import MyBtn from '@/pages/components/my-btn.vue';
  import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
  import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  import { onLoad } from '@dcloudio/uni-app';
  import { baseUrl } from '@/sheep/config';

  const userInfo = computed(() => sheep.$store('user').userInfo);

  const template = computed(() => sheep.$store('app').template?.home);
  const state = reactive({
    isMobileEnd: false, // 手机号输入完毕
    model: {
      'pay_password': '',
      'code': '',
    },
    imgs: [],
    rules: {},
    recharge_money: '',
    data: {},
    faceValueList: [],
  });
  // 图片验证码
  const updateImageCode = () => {
    getImg();
  };
  const imgUrl = ref('');
  const getImg = async () => {
    let url = baseUrl + `/addons/shopro/index/captcha` + '?time=' + new Date().getTime();
    imgUrl.value = url;
  };
  const handleSubmit = async () => {
    if (!state.model.pay_password) {
      sheep.$helper.toast('请输入支付密码');
      return;
    }
    if (!state.model.code) {
      sheep.$helper.toast('请输入短信验证码');
      return;
    }
    const { code, data } = await sheep.$api.user.setPayPassword({ ...state.model });
    if (code === 1) {
      sheep.$router.back();
    }
  };
  onLoad(() => {
    getImg();
  });
</script>

<style scoped lang="scss">
  .wrapepr {
    margin-top: 100rpx;
    padding: 0 30rpx;
  }

  .img-btn {
    width: 132rpx;
    height: 78rpx;
    border: 1px solid #ccc;

    image {
      width: inherit;
      height: inherit;
    }
  }
</style>
